import { ForwardedRef, ReactNode } from 'react'

// material-ui
import { SxProps } from '@mui/material'

// constant
const headerSX = {
  '& .MuiCardHeader-action': { mr: 0 }
}

// ==============================|| CUSTOM MAIN CARD ||============================== //
interface Props {
  border: boolean
  boxShadow: boolean
  children: ReactNode
  content: boolean
  contentClass: string
  contentSX: SxProps
  darkTitle: string
  secondary: ReactNode
  shadow: string
  sx: SxProps
  title: ReactNode
  elevation: number
}
const MainCard = forwardRef(
  (
    {
      border = true,
      boxShadow,
      children,
      content = true,
      contentClass = '',
      contentSX = {},
      darkTitle,
      secondary,
      elevation,
      shadow,
      sx = {},
      title,
      ...others
    }: Partial<Props>,
    ref: ForwardedRef<HTMLDivElement>
  ) => {
    const theme = useTheme()

    return (
      <Card
        ref={ref}
        {...others}
        sx={{
          border: border ? '1px solid' : 'none',
          borderColor: get(theme.palette.primary, 200) + 25,
          ':hover': {
            boxShadow: boxShadow ? shadow || '0 2px 14px 0 rgb(32 40 45 / 8%)' : 'inherit'
          },
          ...sx
        }}
      >
        {/* card header and action */}
        {title && (
          <CardHeader
            sx={headerSX}
            title={darkTitle ? <Typography variant="h3">{title}</Typography> : title}
            action={secondary}
          />
        )}

        {/* content & header divider */}
        {title && <Divider />}

        {/* card content */}
        {content && (
          <CardContent sx={contentSX} className={contentClass}>
            {children}
          </CardContent>
        )}
        {!content && children}
      </Card>
    )
  }
)

export default MainCard
